<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传送组件</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .模态窗 {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div id="应用"></div>
</body>
<script>
    const {createApp: 创建, ref: 引用} = Vue 

    const 根组件 = {
        template: `
            <button @click="显示模态窗=true">打开</button>
            <telport to="body">
                <div v-if="显示模态窗" class="模态窗">
                    <h2>模态窗内容</h2>
                    <button @click="显示模态窗=false">关闭</button>
                </div>
            </telport>
        `,

        setup() {
            const 显示模态窗 = 引用(false)

            return {显示模态窗,}
        }
    }

    const 应用 = 创建(根组件)
    应用.mount('#应用')
</script>
</html>